<!--  -->
<template>
<div class='dashboard-container'>
 <el-row class="title">
    <span>基础数据</span>
  </el-row>
    <el-row :gutter="32">
          <el-col :xs="24" :sm="24" :lg="12">
        <div class="chart-wrapper">
          <el-card>
          <pie-chart v-if="JSON.stringify(pieOption1)!='{}'" :pieData="pieOption1"/>
          </el-card>
        </div>
      </el-col>
       <el-col :xs="24" :sm="24" :lg="12">
        <div class="chart-wrapper">
          <el-card>
          <pie-chart v-if="JSON.stringify(pieOption2)!='{}'" :pieData="pieOption2"/>
          </el-card>
        </div>
      </el-col>
      <!-- <el-col :xs="24" :sm="24" :lg="8">
        <div class="chart-wrapper">
          <el-card>
          <pie-chart :pieData="pieOptions"/>
          </el-card>
        </div>
      </el-col> -->
    </el-row>
     <el-row class="title">
    <span>测量数据</span>
  </el-row>
      <el-row :gutter="32">
       <el-col :xs="24" :sm="24" :lg="24">
        <div class="chart-wrapper">
          <el-row :gutter="32" class="tools">
           <el-select v-model="value" size="mini" @change="selectChange" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
            </el-select>
             <el-radio-group @change="radioChange" v-model="radio" size="mini">
            <el-radio-button v-for="(item,index) in radios" :key="index" :label="item"></el-radio-button>
          </el-radio-group>
           <el-date-picker
            v-model="time"
            type="daterange"
            align="right"
            @change="dateChange"
            unlink-panels
            size="mini"
            style="float:right"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :picker-options="pickerOptions">
          </el-date-picker>
          </el-row>
          <bar-chart v-if="JSON.stringify(barOptions)!='{}'" :height="barHeight" :barData="barOptions"/>
        </div>
      </el-col>
    </el-row>
    <!-- <table ref="table" class="bordered" style="width:100%;text-align:center">
      <tbody>
        <tr>
          <td>时间</td>
          <td v-for="(item,index) in series" :key="index">{{item.name}}</td>
      </tr>
      <tr>
        <td v-for="(item,index) in axisData" :key="index">{{item}}</td>
          <td v-for="(item,index) in series" :key="index">{{item.data[item]}}</td>
      </tr>
      </tbody>
    </table> -->
</div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import PieChart from "../components/PieChart";
import BarChart from "../components/BarChart";
import {
  getRentAdd,
  getRentCut,
  getRentThan,
  rentAddPie,
  rentCutPie
} from "@/api/charts";
import axios from "axios";
export default {
  //import引入的组件需要注入到对象中才能使用
  components: { PieChart, BarChart },
  data() {
    //这里存放数据
    return {
      options: [
        {
          value: "1",
          label: "一年同列"
        },
        {
          value: "2",
          label: "二年同列"
        },
        {
          value: "3",
          label: "三年同列"
        }
      ],
      show: true,
      series: null,
      axisData: null,
      radios: ["一月", "三月", "半年", "一年", "所有"],
      barHeight: "440px",
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            }
          }
        ]
      },
      value: "1",
      radio: "",
      time: "",
      pieOptions: {},
      pieOption1: {},
      pieOption2: {},
      pieOption3: {},
      barOptions: {}
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    fetchData() {
      let data = { data: this.value };
      axios
        .all([
          getRentAdd(data),
          getRentCut(data),
          getRentThan(),
          rentAddPie(),
          rentCutPie()
        ])
        .then(
          axios.spread((add, cut, than, add1, cut1) => {
            this.barOptions = {
              title: {
                text: add.title,
                subtext: add.title
              },
              toolbox: {
                feature: {
                  dataView: {
                    optionToContent: function(opt) {
                      console.log("opt", opt);
                      let axisData = opt.xAxis[0].data;
                      let series = opt.series;
                      console.log("axiosData", axisData);
                      console.log("series", series);
                      let table =
                        '<table class="bordered" style="width:100%;text-align:center"><tbody><tr>' +
                        "<td>时间</td>" +
                        "<td>" +
                        series[0].name +
                        "</td>" +
                        "<td>" +
                        series[1].name +
                        "</td>" +
                        "<td>" +
                        series[2].name +
                        "</td>" +
                        "</tr>";
                      for (var i = 0, l = axisData.length; i < l; i++) {
                        table +=
                          "<tr>" +
                          "<td>" +
                          axisData[i] +
                          "</td>" +
                          "<td>" +
                          series[0].data[i] +
                          "</td>" +
                          "<td>" +
                          series[1].data[i] +
                          "</td>" +
                          "<td>" +
                          series[2].data[i] +
                          "</td>" +
                          "</tr>";
                      }
                      table += "</tbody></table>";
                      return table;
                    }
                  }
                }
              },
              legend: {
                data: [add.data1.name, add.data2.name, add.data3.name]
              },
              xAxis: [{ data: add.date }],
              series: [
                {
                  name: add.data1.name,
                  data: add.data1.value
                  // stack: add.resolve.name
                },
                {
                  name: add.data2.name,
                  data: add.data2.value
                  // stack: add.resolve.name
                },
                {
                  name: add.data3.name,
                  data: add.data3.value
                  // stack: add.resolve.name
                }
              ]
            };
            this.pieOption1 = {
              title: {
                text: "租赁增加"
              },
              series: [
                {
                  name: "租赁增加",
                  data: add1
                }
              ]
            };
            this.pieOption2 = {
              title: {
                text: "租赁减少"
              },
              series: [
                {
                  name: "租赁增加",
                  data: cut1
                }
              ]
            };
          })
        );
    },
    selectChange(value) {
      console.log("下拉项值 ", value);
    },
    dateChange(value) {
      console.log("时间项值 ", value);
    },
    radioChange(value) {
      console.log("单选框值 ", value);
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.fetchData();
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类
.dashboard-container {
  padding: 20px;
  .el-card.is-always-shadow {
    box-shadow: 1px 4px 12px 1px #9aaddc61;
  }
  // .tools {
  //   margin-left: 50px;
  //   margin-right: 50px;
  // }
  .title {
    margin-bottom: 10px;
    border-bottom: 1px solid #dce0e4;
    padding: 14px;
    span {
      font-size: 24px;
      color: #252525;
      padding-left: 10px;
      border-left: 5px solid #409eff;
    }
  }
}
</style>